<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        //变量的赋值规则
        // a变量的赋值 会先找 自己作用域里的变量声明 
        //如果有直接赋值 ，如果没有就在上层作用域查找赋值变量，
        //一层一层向上赋值，直到赋值给全局变量；
        // function fn1(){

        //     function fn2(){

        //         fn3=()=>{a=10;console.log(a);}


        //         fn3();
        //         console.log(a);

        //     }
        //     fn2();
        //     console.log(a);
        // }
        // fn1();
        // console.log(a);


        //箭头函数this穿透
        var btn=document.querySelector('button')

        btn.onclick=()=>{
                //改变此处函数this指向全局，window

            setTimeout(()=>{
                //改变此处函数this指向btn事件源，btn事件源是<button>点击</button>
                console.log(this);
                var obj={
                    myname:"张三",
                    fn:()=>{
                        //改变此处函数当前this指向定时器内,定时器内的this指向window
                        console.log(this);
                        
                    }
                }
                obj.fn();
            },500)
        }

        //普通函数
        // btn.onclick=function(){
            
        //     setTimeout(function(){

        //         var obj={
        //             myname:"张三",
        //             fn:function(){
        //                 console.log(this);
        //             }
        //         }
        //         obj.fn();
        //     },500)
        // }
    </script>
</body>
</html>